<!-- 流程标准按钮 查询-->
<template>
  <page-header-wrapper :title="false">
    <a-card>
      <div class="table-page-search-wrapper">
        <a-form layout="inline">
          <a-row :gutter="48">
            <a-col :md="12" :sm="24">
              <a-form-item label="分组">
                <a-select v-model="queryParam.f_group_" class="pageInfoSelect">
                  <a-select-option value="">全部</a-select-option>
                  <a-select-option :value="1">1组</a-select-option>
                  <a-select-option :value="2">2组</a-select-option>
                  <a-select-option :value="3">3组</a-select-option>
                  <a-select-option :value="4">4组</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <span class="table-page-search-submitButtons">
                <!-- v-auth:act_dsn_btn_list-->
                <a-button type="primary" @click="searchAct_dsn_btn" icon="search">查询</a-button>
                <a-button icon="reload" class="m-l-8" @click="reQuery">重置</a-button>
              </span>
            </a-col>
          </a-row>
        </a-form>
      </div>

      <div class="m-b-16">
        <!-- v-auth:act_dsn_btn_save-->
        <a-button type="primary" class="m-l-8" @click="handleAdd" icon="plus">添加标准按钮</a-button>
        <a-button type="link" class="m-l-8" @click="readme" icon="question-circle">什么是流程标准按钮</a-button>
      </div>

      <a-table
        :scroll="{ x: 1300, y: 500 }"
        :columns="ucolumns"
        :data-source="udata"
        :pagination="upagination"
        :loading="loading"
        rowKey="id"
        @change="tableChange"
        size="middle"
      >
        <span slot="serial" slot-scope="text, record, index">
          {{ (upagination.current - 1) * upagination.pageSize + parseInt(index) + 1 }}
        </span>

        <!-- 状态 -->
        <div slot="btnstyle_" slot-scope="record">
          <a-button :type="record.class_">
            <a-icon :type="record.icon_"></a-icon>
            {{ record.text_ }}
          </a-button>
        </div>
        <!-- 样式 -->
        <div slot="enable_" slot-scope="record">
          <a-tag :color="record.enable_ == 3200 ? 'blue' : 'red'">
            {{ record.enable_ == 3200 ? '有效' : '无效' }}
          </a-tag>
        </div>

        <span slot="operation" slot-scope="text, record">
          <template v-auth:act_dsn_btn_save>
            <a @click="handleEdit(record)">编辑</a>
            <a-divider type="vertical" />
          </template>
          <template v-auth:act_dsn_btn_save>
            <a @click="changeEnable(record, 3201)" v-if="record.enable_ == 3200">禁用</a>
            <a @click="changeEnable(record, 3200)" v-if="record.enable_ == 3201">启用</a>
          </template>
        </span>
      </a-table>
    </a-card>
    <a-drawer
      :title="isEdit ? '编辑标准按钮' : '添加标准按钮'"
      width="38%"
      :visible="visible_edit"
      :body-style="{ paddingBottom: '80px' }"
      @close="visible_edit = false"
      destroyOnClose
    >
      <Edit ref="edit" @close="visible_edit = false" @reloadList="searchAct_dsn_btn"></Edit>
    </a-drawer>
  </page-header-wrapper>
</template>

<script>
import { delAct_dsn_btn, toggleAct_dsn_btn, queryAct_dsn_btnList } from '@/api/workflow/act_dsn_btn.js'
import Edit from '@/views/workflow/Act_dsn_btnEdit.vue'
import Details from '@/views/workflow/Act_dsn_btnView.vue'

export default {
  data() {
    return {
      loading: false, // 遮罩是否显示
      visible_batch: false, // 批量操作可见
      visible_edit: false, // 编辑是否可见
      visible_details: false, // 详情是否可见
      isEdit: false, // 是否编辑
      queryParam: {
        f_group_: '',
        sort: 'indexsort',
        order: 'ASC'
      }, // 查询条件
      selectedRowKeys: [], // 选中的行id
      udata: [], // 表格数据
      upagination: {
        // 表格分页参数
        defaultPageSize: 20,
        total: 0,
        current: 1,
        pageSize: 20,
        showTotal: (total) => `共${total}条数据`,
        showSizeChanger: true,
        pageSizeOptions: ['10', '20', '50', '100'],
      },
      ucolumns: [
        {
          title: '序号',
          width: '50px',
          align: 'center',
          fixed: 'left',
          scopedSlots: { customRender: 'serial' },
        },
        {
          title: '英文标识',
          width: '15%',
          dataIndex: 'id',
          align: 'left',
        },
        {
          title: '按钮',
          width: '20%',
          align: 'left',
          scopedSlots: { customRender: 'btnstyle_' },
        },
        {
          title: '按钮事件',
          dataIndex: 'click_',
          align: 'left',
        },
        {
          title: '分组',
          dataIndex: 'group_',
          width: '50px',
          align: 'center',
        },
        {
          title: '状态',
          width: '100px',
          align: 'center',
          scopedSlots: { customRender: 'enable_' },
        },
        {
          title: '操作',
          dataIndex: 'action',
          width: '150px',
          fixed: 'right',
          scopedSlots: { customRender: 'operation' },
        },
      ], // 表头
      importVisible: false, //是否显示导入数据弹窗
      importExcelFile: {}, //导入模板文件
    }
  },
  created() {
    this.findAct_dsn_btnList()
  },
  methods: {
    /**
     *  查询流程标准按钮列表
     */
    findAct_dsn_btnList() {
      this.loading = true
      queryAct_dsn_btnList(this.queryParam).then((res) => {
        console.log('流程表单按钮列表', res.data)
        this.udata = res.data.records || []
        // 将当前页码和数量与后台绑定
        this.upagination.total = res.data.total
        this.upagination.current = res.data.current
        this.upagination.pageSize = res.data.size
        this.loading = false
      })
    },
    /**
     * 重置查询条件并查询数据
     */
    reQuery() {
      this.queryParam = {}
      this.findAct_dsn_btnList()
    },
    /**
     * 翻页、设置页数量时触发，将分页组建的当前页与大小传给后台
     */
    tableChange(pagination, filters, sorter, { currentDataSource }) {
      this.queryParam.pageNumber = pagination.current
      this.queryParam.pageSize = pagination.pageSize
      if (sorter != null && sorter.order != null) {
        this.queryParam.sort = sorter.field
        this.queryParam.order = sorter.order
      }
      this.findAct_dsn_btnList()
    },
    /**
     * 查询
     */
    searchAct_dsn_btn() {
      // 查询时将当前页码重置为1，否则会出现有数据但不显示的问题
      this.queryParam.pageNumber = 1
      // this.upagination.current = 1
      this.findAct_dsn_btnList()
    },
    /**
     * 选中行数据时触发
     */
    onSelectChange(selectedRowKeys) {
      console.log('selectedRowKeys changed: ', selectedRowKeys)
      this.selectedRowKeys = selectedRowKeys
    },
    /**
     * 进入新增页面
     */
    handleAdd() {
      this.isEdit = false
      this.visible_edit = true
      this.$nextTick(() => {
        this.$refs.edit.resetForm()
        this.$refs.edit.resetnew()
      })
    },
    /**
     * 进入编辑页面
     */
    handleEdit(res) {
      this.isEdit = true
      this.visible_edit = true
      this.$nextTick(() => {
        this.$refs.edit.findAct_dsn_btnById(res.id)
      })
    },
    /**
     * 进入详情页面
     */
    handleView(res) {
      this.visible_details = true
      this.$nextTick(() => {
        this.$refs.details.findAct_dsn_btnById(res.id)
      })
    },
    /**
     * 删除流程标准按钮
     */
    delAct_dsn_btnById(res) {
      let id = res.id
      delAct_dsn_btn(id).then((res) => {
        console.log('delAct_dsn_btn:', res)
        if (res.code !== 0) {
          this.$message.error(res.msg)
        } else {
          this.selectedRowKeys = []
          this.searchAct_dsn_btn()
          this.$message.success('删除成功')
        }
      })
    },
    changeEnable(res, enable) {
      toggleAct_dsn_btn(res.id, enable).then((res) => {
        console.log('changeEnable:', res, enable)
        if (res.code !== 0) {
          this.$message.error(res.msg)
        } else {
          this.searchAct_dsn_btn()
          this.$message.success('操作成功')
        }
      })
    },
    readme() {
      this.$router.push({ name: 'act_dsn_btnReadme', params: { queryParam: this.queryParam } })
    },
  },
  components: {
    Edit,
    Details,
  },
}
</script>
<style scoped>
.pageInfoSelect {
  width: 220px;
}
</style>